<template>
  <div class="s-space">
    <div>
      <div id="page-follows" class="wrapper clearfix master">
        <div page="follow" class="clearfix col-full">
          <div class="follow-sidenav">
            <div class="nav-container follow-container">
              <div class="be-scrollbar follow-list-container ps">
                <ul class="follow-list">
                  <!-- 根据class=follow-item cur是否有cur来显示默认选中的选项 -->
                  <li class="follow-item">
                    <span class="icon icon-follow icon-follow-all"></span>
                    <router-link :to="url_guanzhu" class="text">我的关注</router-link>
                  </li>
                  <li class="follow-item">
                    <span class="icon icon-follow icon-follow-fans"></span>
                    <router-link :to="url_fans" class="text">我的粉丝</router-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "likeandfans",
  data() {
    return {
      url_guanzhu: "/person/likeandfans/"+this.$route.params.userId+"/guanzhu",
      url_fans: "/person/likeandfans/"+this.$route.params.userId+"/fans",
    };
  },
  methods: {}
};
</script>
<style   scoped>
@import "//s1.hdslb.com/bfs/static/jinkela/space/css/space.8.9f1374eeec86fa11c6ebad565e9755d06d7d0fc1.css";
@import "//s1.hdslb.com/bfs/static/jinkela/space/css/space.4.9f1374eeec86fa11c6ebad565e9755d06d7d0fc1.css";
.bili-avatar {
  display: block;
  position: relative;
  background-image: url();
  background-size: cover;
  border-radius: 50%;
  margin: 0;
  padding: 0;
}
.bili-avatar * {
  margin: 0;
  padding: 0;
}
.bili-avatar-face {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.bili-avatar-pendent-dom {
  height: 176.48%;
  width: 176.48%;
  position: absolute;
  top: -38.33%;
  left: -38.33%;
  overflow: hidden;
}
.bili-avatar-pendent-dom img {
  height: 100%;
  min-width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bili-avatar-img {
  border: none;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
}
.bili-avatar-img-radius {
  border-radius: 50%;
}
.bili-avatar-img[src=""],
.bili-avatar-img:not([src]) {
  opacity: 0;
}
.bili-avatar-icon--big-vip {
  background-image: url();
}
.bili-avatar-icon--business {
  background-image: url();
}
.bili-avatar-icon--personal {
  background-image: url();
}
.bili-avatar-icon--small-vip {
  background-image: url();
}
.bili-avatar-img.bili-avatar-img-error {
  display: none;
}
.bili-avatar-right-icon {
  width: 27.5%;
  height: 27.5%;
  position: absolute;
  right: 0;
  bottom: -1px;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast;
}
.bili-avatar-nft-icon {
  position: absolute;
  width: 27.5%;
  height: 27.5%;
  right: -webkit-calc(27.5% - 1px);
  right: -moz-calc(27.5% - 1px);
  right: calc(27.5% - 1px);
  bottom: -1px;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast;
}
.bili-avatar-icon--nft {
  background-image: url("//i0.hdslb.com/bfs/activity-plat/static/20211216/df3e2ff90b315fca2f8d24a29cb68a47/tFsbCWMDtV.gif");
}
@-webkit-keyframes bili-avatar {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-97.5%, 0, 0);
    transform: translate3d(-97.5%, 0, 0);
  }
}
@-moz-keyframes bili-avatar {
  0% {
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -moz-transform: translate3d(-97.5%, 0, 0);
    transform: translate3d(-97.5%, 0, 0);
  }
}
@keyframes bili-avatar {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-97.5%, 0, 0);
    -moz-transform: translate3d(-97.5%, 0, 0);
    transform: translate3d(-97.5%, 0, 0);
  }
}
.bili-avatar .bili-avatar-size-80 {
  width: 22px;
  height: 22px;
  bottom: -1px;
}
.bili-avatar .bili-avatar-size-60,
.bili-avatar .bili-avatar-size-50,
.bili-avatar .bili-avatar-size-48 {
  width: 18px;
  height: 18px;
  bottom: -1px;
}
.bili-avatar .bili-avatar-size-40,
.bili-avatar .bili-avatar-size-36 {
  width: 14px;
  height: 14px;
  bottom: -1px;
}
.bili-avatar .bili-avatar-size-30,
.bili-avatar .bili-avatar-size-24 {
  width: 12px;
  height: 12px;
  bottom: -1px;
}
.bili-avatar .bili-avatar-size-nft-80 {
  width: 22px;
  height: 22px;
  bottom: -1px;
  right: -webkit-calc(22px - 1px);
  right: -moz-calc(22px - 1px);
  right: calc(22px - 1px);
}
.bili-avatar .bili-avatar-size-nft-60,
.bili-avatar .bili-avatar-size-nft-50,
.bili-avatar .bili-avatar-size-nft-48 {
  width: 18px;
  height: 18px;
  bottom: -1px;
  right: -webkit-calc(18px - 1px);
  right: -moz-calc(18px - 1px);
  right: calc(18px - 1px);
}
.bili-avatar .bili-avatar-size-nft-40,
.bili-avatar .bili-avatar-size-nft-36 {
  width: 14px;
  height: 14px;
  bottom: -1px;
  right: -webkit-calc(14px - 1px);
  right: -moz-calc(14px - 1px);
  right: calc(14px - 1px);
}
.bili-avatar .bili-avatar-size-nft-30,
.bili-avatar .bili-avatar-size-nft-24 {
  width: 12px;
  height: 12px;
  bottom: -1px;
  right: -webkit-calc(12px - 1px);
  right: -moz-calc(12px - 1px);
  right: calc(12px - 1px);
}
</style>





